<template>
	<div class="home" >
		<div class="note" @click="jump('note')">
			<svg class="icon" aria-hidden="true" style="font-size: 80px;"><use xlink:href="#icon-biji"></use></svg>
		</div>
		<div class="tree" @click="jump('tree')">
			<svg class="icon" aria-hidden="true" style="font-size: 80px;"><use xlink:href="#icon-fanqie"></use></svg>
		</div>
		<div class="time" @click="jump('time')">
			<svg class="icon" aria-hidden="true" style="font-size: 80px;"><use xlink:href="#icon-70BasicIcons-all-49"></use></svg>
		</div>
		<div class="friend" @click="jump('friend')">
			<svg class="icon" aria-hidden="true" style="font-size: 80px;"><use xlink:href="#icon--"></use></svg>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		jump(e) {
			this.$router.push({ path: `/${e}` }); //跳转到相应的页面
		}
	}
};
</script>

<style scss scoped="scoped">
.home {
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
}
.home div {
	display: flex;
	justify-content: center;
	align-items: center;
}

.note {
	height: 50%;
	width: 50%;
	background-color: #d8e3e7;
	
}

.tree {
	height: 50%;
	width: 50%;
	background-color: #51c4d3;
}

.time {
	height: 50%;
	width: 50%;
	background-color: #126e82;
}

.friend {
	height: 50%;
	width: 50%;
	background-color: #132c33;
}
</style>
